<template>
  <div class="box">
     <!-- 表头 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-button type="success" class="right" @click="showEdit('add')"><i class="el-icon-edit"></i>新增用户</el-button>

    </el-form>
    <!-- 表格数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" > </el-table-column>
      <el-table-column prop="number" label="企业编号" width="150"> </el-table-column>
      <el-table-column prop="shortName" label="企业简称"> </el-table-column>
      <el-table-column prop="tags" label="标签"> </el-table-column>
      <el-table-column prop="creatorID" label="创建者"> </el-table-column>
      <el-table-column prop="addDate" label="创建日期"> </el-table-column>
      <el-table-column prop="remarks" label="备注"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          {{scope.row.state===1? '启用':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="150">
        <!-- 子组件插槽 -->
        <template #default="{ row }">
          <div class="actions">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              class="bt1"
              @click="showEdit('edit',row)"
            ></el-button>

            <el-button
              type="primary"
              icon="el-icon-close"
              circle
              class="bt1"
              @click="jinyong(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              class="bt2"
              @click="del(row)"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryObj.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="queryObj.pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="total"
      background
      class="fpage"
    >
    </el-pagination>
    <el-dialog
      :title="Title"
      :visible.sync="centerDialogVisible"
      :before-close="quxiao"
      width="50%"
      center
    >
      <!-- 新增用户表单内容 -->
      <el-form ref="form" :model="form" label-width="200px" :rules="rules">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="form.company"></el-input>
        </el-form-item>
        <span class="span">https://www.tianyancha.com （在此可查询所属公司全称及简称）</span>
        <el-form-item label="地区城市" class="span1">
          <el-select v-model="form.province" placeholder="请选择">
            <el-option label="上海" value="shanghai"></el-option>
            <el-option label="北京" value="beijing"></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择">
            <el-option label="朝阳区" value="chaoyang"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="form.remarks"
            placeholder="Please input"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, disabled, detail, update, add } from '@/api/hmmm/companys.js'
export default {
  data () {
    return {
      centerDialogVisible: false, // 控制dialog的开关
      drawerType: 'add',
      total: 20,
      // Title: '',
      queryObj: {
        page: 1,
        pagesize: 10
      },
      tableData: [
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ],
      formInline: {
        user: '',
        region: ''
      },
      // dialog表单内容
      form: {
        id: 0,
        shortName: '', // 企业名称
        company: '', // 所属公司
        province: '', // 城市地区
        city: '',
        tags: '', // 方向
        remarks: '', // 备注
        number: '',
        isFamous: true
      },
      // 表单校验
      rules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '城市地区不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '城市地区不能为空', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.initData()
  },

  methods: {
    // 封装渲染数据
    async initData () {
      const { data } = await list(this.queryObj)
      // this.total = data.counts
      data.items.forEach(ele => {
        ele.addDate = ele.addDate.substring(0, 10) + '' + ele.addDate.substring(11, 19)
      })
      this.tableData = data.items
      // console.log(data)
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      this.initData()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.queryObj.page = val
      this.initData()
    },
    // 关闭dialog
    quxiao () {
      this.form.shortName = ''
      this.form.company = ''
      this.form.id = 0
      this.form.province = ''
      this.form.city = ''
      this.form.tags = ''
      this.form.remarks = ''
      this.form.number = ''
      this.form.isFamous = true
      this.centerDialogVisible = false
    },
    async queding () {
      // console.log(1)
      try {
        await this.$refs.form.validate()
        if (this.drawerType === 'add') {
          // 发起添加请求
          // console.log(1)
          await add(this.form)
        }
        if (this.drawerType === 'edit') {
          // 发起修改请求
          await update(this.form)
        }
        // 清空表单
        // 轻提示
        this.$message.success(
          this.drawerType === 'add' ? '添加成功' : '修改成功'
        )
        this.initData()
        this.centerDialogVisible = false
      } catch (error) {
        this.$message.error('请输入必填项')
      }
    },
    // 删除数据
    async del (id) {
      try {
        await remove(id)
        this.initData()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 禁用数据
    async jinyong (id) {
      const res = await disabled(id)
      console.log(res)
      // console.log(id.state)
      this.initData()
      // console.log(id.state)
    },
    // 编辑数据、增加数据
    // 展示centerDialog窗口
    async showEdit (type, id) {
      this.drawerType = type
      if (type !== 'add') {
        const { data } = await detail(id)
        console.log(data)
        this.form.shortName = data.shortName
        this.form.company = data.company
        this.form.id = data.id
        this.form.province = data.province
        this.form.city = data.city
        this.form.tags = data.tags
        this.form.remarks = data.remarks
        this.form.number = data.number
        this.form.isFamous = data.isFamous
        this.form.isFamous === 1 ? (this.form.isFamous = true) : (this.form.isFamous = false)
        // this.form = data
        // this.form.id = data.id
        // console.log(this.form)
      }
      this.centerDialogVisible = true
      // const newForm = []
    }

  },
  computed: {
    Title () {
      if (this.drawerType === 'add') return '创建用户'
      if (this.drawerType === 'edit') return '编辑用户'
      else {
        return 'add'
      }
    }
  }
}
</script>

<style scoped lang="less">
.box {
  background-color: #fff;
  padding: 20px 20px 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  //编辑、删除按钮样式
  .bt1 {
    background-color: #ecf5ff;
    color: #409eff;
  }
  .bt1:hover {
    background-color: #409eff;
    color: #ecf5ff;
  }
  .bt2 {
    background-color: #ecf5ff;
    color: #f87f92;
  }
  .bt2:hover {
    background-color: #f87f92;
    color: #ecf5ff;
  }
  .right {
    float: right;
  }
  .fpage {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
  .span{
    margin-top: 10px;
    // margin-bottom: 10px;
    margin-left: 30%;
  }
  .span1{
    margin-top: 40px;

  }
}
</style>
